<template>
    <main class="inner-page">
		<van-sticky>
			<div class="nav">
				<van-dropdown-menu :active-color="themeColor">
					<van-dropdown-item v-model="sortType" :options="sortOptions" @change="sortChange"/>
				</van-dropdown-menu>
				<div class="div-search" @click="toInputPage">
					<van-icon name="search" class="mgr10"/>
					<span>{{searchKey===''?'搜本店':searchKey}}</span>
				</div>
				<div class="div-show-type" @click="toggleShowType"><i v-if="showType==='block'" class="iconfont">&#xe7a8;</i><i v-else-if="showType==='flat'" class="iconfont">&#xe7a9;</i></div>
				<div class="div-filter" @click="displayFilterSheet">筛选 <van-icon name="filter-o"/></div>
			</div>
		</van-sticky>
		<van-list :class="'goods-list '+showType" v-if="goodsList&&goodsList.length>0"
				  :finished="pager.finished" v-model:loading="pager.loading" v-model:error="pager.error" error-text="请求失败，点击重新加载">
			<template #finished><van-divider>没有更多了</van-divider></template>
			<goods-item v-for="(item,index) in goodsList" :goods="item" key="index"/>
		</van-list>
		<van-empty v-else image="search" description="很抱歉，暂无结果~" />
		<search-condition :theme-color="themeColor" :shop-id="shopId" @handle-search="getNewCondition" :locate-able="true" ref="refSearchCondition"/>
		<van-back-top class="base-back-top"/>
	</main>
</template>
<style lang="scss" scoped>
.inner-page{
	--van-primary-color:v-bind(themeColor);
	:deep(.van-list__finished-text),:deep(.van-list__error-text){width:100%;column-span:all;}
	:deep(.van-divider){margin-top:0}
}
.nav{
	--van-primary-color:v-bind(themeColor);
	--van-dropdown-menu-height:46px;
	font-size:14px;color:var(--font-second-color);
	height:46px;width:100%;display:flex;align-items: center; padding:0 10px;
	background-color:var(--white-color);box-shadow: var(--van-dropdown-menu-shadow);
	&>div:not(:last-child){margin-right:10px}
	:deep(.van-dropdown-menu__bar){box-shadow:none;}
	.div-search{
		background-color:var(--bar-input-color);
		color:var(--font-third-color); width:50%;
		height:30px;border-radius: 20px; align-items:center; display:flex;
		padding:0 8px 0 12px;
		//border:1px solid var(--van-primary-color);
		flex:1;
		.van-icon{font-size:18px;}
	}
	.div-filter{
		height:24px;display:flex; align-items: center; padding-left:8px; border-left:1px solid var(--border-lighter-color);
		.van-icon{font-size:20px;}
	}
	.div-show-type{
		height:30px;padding:0 4px;display:flex; align-items: center;
		.iconfont{font-size:20px;}
	}
}
</style>
<script lang="ts" setup>
import {SearchGoodsCondition} from '@/types'
//props
const props =defineProps({
	themeColor:{
		type:String,
		required:true,
	},
	shopId:{
		type:String,
		required:true,
	},
})
//data
const {searchKey,condition,sortOptions,pager,} = useSearch()//从hooks中解构查询页所需的响应式变量
const showType=ref<'block'|'flat'>('block')

const sortType= ref('0')   //排序规则 0综合 1销量 2价格升序 3价格降序 默认
const refSearchCondition=ref()
condition.locate='59-591'
condition.shopList.push('ZBCU03')
condition.brandList.push('02')
condition.catId ='0207'
//todo: 以上强行设置只是为了做页面测试

const goodsList = ref(<Array<any>>[])  //瀑布流查询店铺所有商品的示例
goodsList.value = [
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:429,
		hasCoupon:true,
		noStork:true,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:99999,
		noStork:true,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max Apple iPhone 13 Pro Max Apple iPhone 13 Pro Max',
		guidePrice:580000,
		saleAmount:99999,
		hasCoupon:true,
		noStork:false,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:99999,
		noStork:true,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生 小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:99999,
		hasCoupon:true,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:99999,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:0,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
		saleAmount:9,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max Apple iPhone 13 Pro Max Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生 小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生 小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:50,
	},
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
		saleAmount:0,
	},
]
const router=useRouter()

//methods
const toggleShowType=()=>{
	if(showType.value==='block')	showType.value='flat'
	else showType.value='block'
}
const toInputPage=()=>{
	let query:any ={shopId:props.shopId}
	if(searchKey.value!==''){
		query.key=searchKey.value
	}
	router.push({path:'/shop/search/inputKey',query:query})
}
//排序操作
const sortChange=(value:string)=>{
	console.log(value)
	//todo: 自动触发从新查询
}
//打开筛选面板
const displayFilterSheet=()=>{
	refSearchCondition.value.displaySheet(condition)
}
//筛选面板“确定”后，返回新的筛选条件
//todo: 这里同时要触发重新查询
const getNewCondition=(json:SearchGoodsCondition)=>{
	condition.inStork = json.inStork
	condition.inReplaceGrant = json.inReplaceGrant
	condition.locate = json.locate //todo:收货地区编码，来自于用户配置的收货地址区域 重置时，应从用户的收货地列表中选择默认的第一个地址的省市
	condition.minPrice = json.minPrice
	condition.maxPrice = json.maxPrice
	condition.shopList.splice(0,condition.shopList.length)
	condition.brandList.splice(0,condition.brandList.length)
	condition.shopList.push(...json.shopList)
	condition.brandList.push(...json.brandList)
	condition.catId = json.catId
}
</script>